<template>
  <div class="jeecg-basic-table station-data-list-view">
    <div class="tip">
      <span>站点数据列表</span>
      <span class="tip-img"></span>
    </div>
    <div class="jeecg-search-layer">
      <a-form ref="form" :model="queryParam">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="数据开始时间">
              <a-date-picker
                v-model:value="queryParam.startTime"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                show-time
                placeholder="请选择数据开始时间"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="站点编码">
              <a-select v-model:value="queryParam.stationCode" allowClear placeholder="请选择站点编码">
                <template v-for="(item, index) in stationLists" :key="index">
                  <a-select-option :value="item.stationCode">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-form-item>
              <a-button type="primary" @click="onSearch">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="jeecg-table-view">
      <a-table :loading="loading" rowKey="id" :dataSource="dataSource" :columns="columns" :pagination="false" :scroll="{ x: columnWidth }"> </a-table>
      <Pagination
        v-model:current="ipagination.current"
        :pageSize="ipagination.pageSize"
        :total="ipagination.total"
        show-less-items
        @change="handlePageChange"
        :hideOnSinglePage="true"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, onMounted } from 'vue';
import { stationDataPageApi } from '@/api/station-data';
import { stationListApi } from '@/api/station';
import { Pagination } from 'ant-design-vue';
import moment from 'moment';

const currentTime = moment(); // 获取当前时间
const halfHourBefore = currentTime.subtract({ minutes: 30 }); // 获取当前时间之前半小时

let loading = ref(false);

let queryParam = ref({
  // 数据开始时间
  startTime: halfHourBefore.format('YYYY-MM-DD HH:mm:ss'),
  // 站点编码
  stationCode: '47DE555C93',
});

// 数据源
let dataSource = ref([]);

// 站点列表
let stationLists = ref([]);

let columns = ref([]);

let ipagination = ref({
  current: 1,
  pageSize: 10,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total, range) => {
    return range[0] + '-' + range[1] + ' 共' + total + '条';
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
});

let columnWidth = ref(0);

/**
 * 初始化列表数据
 */
function onInit() {
  loading.value = true;
  let { current, pageSize } = ipagination.value;
  let param = {
    current,
    size: pageSize,
  };
  let keys = Object.keys(queryParam.value);
  Object.values(queryParam.value).map((_, i) => {
    if (_ !== '') {
      param[keys[i]] = _;
    }
  });
  stationDataPageApi(param)
    .then((res) => {
      loading.value = false;
      columnWidth.value = 0;
      columns.value = [];
      dataSource.value = [];
      let { data, headers } = res;
      let { records, size, current, total } = data;
      if (records.length !== 0) {
        headers.map((key, i) => {
          columnWidth.value += i + 100;
          columns.value.push({
            title: key,
            align: 'center',
            dataIndex: `h-${i}`,
          });
        });
        for (let i = 0; i < records.length; i++) {
          let metaData = JSON.parse(records[i]['data']);
          let params = {};
          for (let j = 0; j < metaData.length; j++) {
            params[`h-${j}`] = metaData[j].value;
          }
          dataSource.value.push(params);
        }
      }
      Object.assign(ipagination.value, {
        current,
        pageSize: size,
        total,
      });
    })
    .catch((error) => {
      loading.value = false;
    });
}

/**
 * 获取所有站点数据
 */
function stationList() {
  stationListApi({}).then((res) => {
    stationLists.value = res;
  });
}

/**
 * 切换当前页数
 */
function handlePageChange(page) {
  ipagination.value.current = page;
  onInit();
}

/**
 * 搜索数据
 */
function onSearch() {
  ipagination.value.current = 1;
  onInit();
}

onMounted(() => {
  stationList();
  onInit();
});
</script>

<style lang="less" scoped>
.station-data-list-view {
  margin: 12px;
  background: #fff;
  .tip {
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-17.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    span {
      font-size: 16px;
      color: #fff;
    }
  }
  .jeecg-search-layer {
    margin: 0 0 17px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
    .ant-form {
      max-width: auto;
      .ant-form-item {
        margin-bottom: 24px;
      }
      :deep(.ant-col) {
        width: auto;
      }
    }
  }
  .jeecg-table-view {
    margin: 0 24px;
  }
  .ant-pagination {
    padding: 24px 0;
  }
}
</style>